<template>
    <g-form-wrap title="添加前台用户" :on-save-btn-click="onSaveBtnClick">
        <el-form
            ref="ruleForm"
            :model="formData"
            :rules="formRules"
            label-position="top"
            inline
        >
            <div class="w-full">
                <el-form-item class="w-96" label="登录名（邮箱）：" prop="frontLoginname">
                    <el-input
                        v-model="formData.frontLoginname"
                        placeholder="请输入登录名（邮箱）"
                        clearable
                    />
                </el-form-item>
                <el-form-item class="w-96" label="用户姓名：" prop="frontUsername">
                    <el-input v-model="formData.frontUsername" placeholder="请输入用户姓名" clearable />
                </el-form-item>
                <el-form-item class="w-96" label="所属机构ID：" prop="researchOrgId">
                    <g-select
                        v-model="formData.researchOrgId"
                        class="search-item"
                        value-key="key"
                        placeholder="请选择机构"
                        search-key="true"
                        url="api-admin/research-org-list|entity.researchOrgName,"
                    />
                </el-form-item>
            </div>
        </el-form>
    </g-form-wrap>
</template>

<script lang="ts" setup>
import { reactive, ref, toRefs } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import type { Loading } from '@/components/Dialog/types'
import { useRoute, useRouter } from 'vue-router'
import elv from '@/utils/elValidation'
import { getOrgListApi } from '@/api/system'
import { Page } from '@/types/storeModule'

const route = useRoute()
const router = useRouter()
const isEditing = ref(false)
const ruleForm = ref<FormInstance>()
let orgOption = ref<any>([])
const formData = reactive(<
  {
    frontLoginname: string
    frontUsername: string | number
    researchOrgId: string | number
  }
>{
	frontLoginname: '',
	frontUsername: '',
	researchOrgId: ''
})
const formRules = reactive<FormRules>({
	frontLoginname: [{ required: true, validator: elv.isEmail(), trigger: 'change' }],
	frontUsername: [{ required: true, message: '请输入姓名', trigger: 'change' }],
	researchOrgId: [{ required: true, message: '请选择机构', trigger: 'change' }]
})
// 获取机构列表
const getOrgListFunc = async () => {
	try {
		const page = reactive<Page>({
			currentPage: 1,
			pageSize: 10
		})
		const data = await getOrgListApi({ page: page, entity: { researchOrgName: '' } })
		console.log('机构列表---', data)
		setTimeout(() => {
			if (data.result) {
				orgOption = data.result.map((item) => {
					return { id: item.researchOrgId, name: item.researchOrgName }
				})
				console.log('orgOption =====', orgOption)
			}
		}, 10)
	} catch (err) {
		loading = false
	}
}
// getOrgListFunc();
console.log('orgOption=', orgOption)

const id = route.query.id as string
console.log('route.query,,==', route.query)
isEditing.value = id ? true : false
// 编辑时获取详情信息
const getDetail = () => {
	console.log('现在是编辑')
}
// 编辑时
if (isEditing.value) {
	getDetail()
}
// 保存提交
const onSaveBtnClick = (loading: Loading) => {
	ruleForm.value?.validate((valid) => {
		if (valid) {
			loading(true)
			if (isEditing.value) {
				ElMessage.success('编辑成功')
			} else {
				ElMessage.success('添加成功')
			}
			setTimeout(() => {
				loading(false)
				router.back()
			}, 1000)
		} else {
			return false
		}
	})
}
</script>
